<template>
  <div id="firstsurvey">
    <el-container style="padding: 120px">
      <el-header style="text-align: right; font-size: 12px; padding: 0" height="20px">
        <el-row type="flex" justify="space-between">
          <el-col>
            <el-breadcrumb separator="/">
              <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
              <el-breadcrumb-item :to="{ path: '/firstsurvey' }"><span style="color: brown;">第一轮调查</span>
              </el-breadcrumb-item>
              <el-breadcrumb-item :to="{ path: '/secondsurvey' }">第二轮调查</el-breadcrumb-item>
              <el-breadcrumb-item :to="{ path: '/thirdsurvey' }">第三轮调查</el-breadcrumb-item>
              <el-breadcrumb-item :to="{ path: '/forthsurvey' }">第四轮调查</el-breadcrumb-item>
              <el-breadcrumb-item :to="{ path: '/resurltview' }">
                <!-- <span  style="font-weight: bolder;">可视化结果分析</span> -->
              </el-breadcrumb-item>
            </el-breadcrumb>
          </el-col>
          <el-col>
            <span><i class="el-icon-user-solid" style="margin-right: 5px"></i>
              <span style="color: white; font-size: 13px">尊敬的{{ user.userClass }}：{{ user.name }} 您好</span></span>
          </el-col>
        </el-row>
      </el-header>

      <el-container style="    height: 700px;">
        <el-aside width="600px" style="background: #0000007a">
          <p class="neon">相关资料背景说明</p>
          <el-divider>请点击对应链接查看</el-divider>
          <div class="text">
            <el-link type="primary" class="ellink" href="https://gkml.samr.gov.cn/nsjg/bgt/202106/t20210610_330502.html"
              target="_blank" icon="el-icon-document">
              中华人民共和国劳动法</el-link>
            <el-link type="primary" class="ellink" href="http://mbivip.com/article/30427.html" target="_blank"
              icon="el-icon-document">
              那些工作一天八小时(95后不加班)</el-link>

            <el-link type="primary" class="ellink" href="https://www.docin.com/p-2098755368.html" target="_blank"
              icon="el-icon-document">
              95后新蓝领现状报告
            </el-link>

            <el-link type="primary" class="ellink" href="https://zhuanlan.zhihu.com/p/412592478" target="_blank"
              icon="el-icon-document">
              如何管理“95后”员工？</el-link>
            <el-link type="primary" class="ellink" href="https://user.guancha.cn/main/content?id=685736" target="_blank"
              icon="el-icon-document">
              我是95后：我不愿加班，谁爱加谁加</el-link>
            <el-link type="primary" class="ellink" href="https://www.sohu.com/a/192725626_401170" target="_blank"
              icon="el-icon-document">
              95后成职场新生力量，你真的了解它们吗？
            </el-link>
            <el-link type="primary" class="ellink" href="https://zhuanlan.zhihu.com/p/146775658" target="_blank"
              icon="el-icon-document">
              202022年95后用户画像研究报告</el-link>
            <el-link type="primary" class="ellink" href="https://zhuanlan.zhihu.com/p/412592478" target="_blank"
              icon="el-icon-document">拒绝加班的95后
            </el-link>
            <el-link type="primary" class="ellink" href="https://www.zhihu.com/question/464985765/answer/1941585464"
              target="_blank" icon="el-icon-document">
              现在的95后指挥不动，下班准时走，活安排不下去只能自己干，怎么办？
            </el-link>
            <el-link type="primary" class="ellink" href="https://v.qq.com/x/page/p09231tsmwe.html" target="_blank"
              icon="el-icon-video-camera">
              加班竟成95后消遣新方式
            </el-link>
            <el-link type="primary" class="ellink" href="https://36kr.com/video/1638732441023748" target="_blank"
              icon="el-icon-video-camera">
              95后设计师加班猝死，被“加班文化”加速“去世”的年轻人</el-link>
            <el-link type="primary" class="ellink" href="https://v.qq.com/x/page/b3332rx9bv5.html" target="_blank"
              icon="el-icon-video-camera">
              95后加班直接开怼老板：到点了我不走，在这给你守灵啊！
            </el-link>
          </div>
          <!-- <el-divider></el-divider> -->
        </el-aside>
        <el-main width="600px" style="background: rgb(255 255 255 / 40%); text-align: center">
          <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-position="top" label-width="100px"
            class="demo-ruleForm">
            <el-form-item prop="desc">
              <span slot="label" class="question"> 你对加班的看法？ </span>
              <el-input type="textarea" :autosize="{ minRows: 5, maxRows: 5 }" v-model="ruleForm.desc">
              </el-input>
            </el-form-item>
            <el-form-item prop="condition">
              <span slot="label" class="question">
                愿意加班的条件有哪些？
              </span>
              <el-input type="textarea" :autosize="{ minRows: 5, maxRows: 5 }" v-model="ruleForm.condition">
              </el-input>
            </el-form-item>
            <el-form-item prop="level">
              <span slot="label" class="question">
                对加班的接受程度及说明
              </span>
              <el-input type="textarea" :autosize="{ minRows: 5, maxRows: 5 }" v-model="ruleForm.level">
              </el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
              <el-button @click="resetForm('ruleForm')">重置</el-button>
            </el-form-item>
          </el-form>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
  import axios from "axios";
  export default {
    data() {
      return {
        ruleForm: {
          desc: "",
          condition: "",
          level: "",
        },
        user: {
          userClass: "",
          name: "",
        },
        rules: {
          desc: [{ required: true, message: "请填写内容", trigger: "blur" }],
          condition: [{ required: true, message: "请填写内容", trigger: "blur" }],
          level: [{ required: true, message: "请填写内容", trigger: "blur" }],
        },
      };
    },
    created() {
      // 如果是跳转来的，则接受初始化参数
      this.getData();
      //         if (this.$route.query) {
      //     this.bookResult = this.$route.query.searchData;
      //     this.searchInfo = this.$route.query.searchInfo;
      //     this.blength = this.bookResult.length;
      //   }
    },
    // mounted() {
    //     this.getData();
    // },
    methods: {
      getData() {
        var User = JSON.parse(sessionStorage.getItem("user"));
        this.user.name = User.uname;
        if (User.userClass == "zuzhizhe") {
          this.user.userClass = "组织者";
        } else if (User.userClass == "zhuanjia") {
          this.user.userClass = "专家";
        } else if (User.userClass == '游客') {
          this.user.userClass = '游客';
          this.user.name = NULL
        } else {
          this.user.userClass = NULL;
        }
      },
      submitForm(formName) {
        var User = JSON.parse(sessionStorage.getItem("user"));
        //if(User.id=='0'){alert("You should log in first!")}//设置必须登录才能答题
        //else{
        this.$refs[formName].validate((valid) => {
          if (valid) {
            //要传到后端的数据
            var answer = {
              id: User.id,
              q1: this.ruleForm.desc, //前端完成后修改
              q2: this.ruleForm.condition,
              q3: this.ruleForm.level,
            };
            var that = this;
            // 对应 Python 提供的接口，这里的地址填写下面服务器运行的地址，本地则为127.0.0.1，外网则为 your_ip_address
            const path = "http://d532612h14.51vip.biz:54260/addAnswer";
            axios({
              method: "post",
              url: path,
              data: answer,
            })
              .then(function (response) {
                that.$message({
                  message: "Successfully saved!",
                  type: "success",
                });
              })
              .catch(function (error) {
                console.log("Error" + error);
                that.$message.error("提交错误请重试！！");
              });
          } else {
            console.log("error submit!!");
            return false;
          }
        });
        //}
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
    },
  };
</script>


<style scoped>
  #firstsurvey {
    width: 100%;
    height: 100%;
    background: url(../../assets/bg.jpg) no-repeat;
    background-size: cover;
    /* position: absolute; */
    background-attachment: fixed;
  }

  .text {
    width: 600px;
    /* height: 500px; */
    color: white;
    align-items: center;
    padding-top: 2px;
  }

  .question {
    font-size: 18px;
    color: #000000;
  }

  .neon {
    color: #cce7f8;
    font-size: 28px;
    margin: 30px auto;
    -webkit-animation: shining 0.5s alternate infinite;
    animation: shining 0.5s alternate infinite;
  }

  @keyframes shining {
    from {
      text-shadow: 0 0 5px lightblue, 0 0 5px lightblue, 0 0 30px lightblue,
        0 0 40px skyblue, 0 0 50px skyblue, 0 0 60px skyblue;
    }

    to {
      text-shadow: 0 0 5px lightblue, 0 0 10px lightblue, 0 0 15px lightblue,
        0 0 20px skyblue, 0 0 25px skyblue, 0 0 30px skyblue;
    }
  }

  .ellink {
    color: white;
    font-size: 16px;
    margin: 20px 0;
    display: block;
  }

  .login-container {
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -moz-border-radius: 5px;
    background-clip: padding-box;
    margin: 200px auto;
    width: 350px;
    padding: 35px 35px 15px 35px;
    /* border: 1px solid #eaeaea; */
    background: #0000007a;
    color: #fff;
  }

  .title {
    margin: 0px auto 40px auto;
    text-align: center;
  }

  .remember {
    margin: 0px 0px 35px 0px;
  }

  .loginBtn {
    width: 100%;
    font-size: 20px;
    letter-spacing: 10px;
  }
</style>